<!DOCTYPE html>
<html>
<head>
	<title>vue实例</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="./js/vue.js"></script>
	<style type="text/css">
		.ac {
			width:100px;
			height: 50px;
			background-color: pink;
			vertical-align: middle;
			margin-right: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.kk {
			display: flex;

		}
		
	</style>
</head>
<body>
	<div id="app">
		<li v-for="(item, index) of list" :key="item.id" class="ac">
			<!-- key值要唯一，尽量不使用index作为key值，尽量使用后端返回数据的id值 -->
			{{index}}---{{item.name}}
		</li>

		
			<li v-for="(item, key,index) of userInfo">
				{{key}}--{{item}}--{{index}}  <!-- 这里的key便是对象中的键名，item是值 -->
			</li>
		
		
	
	</div>




</body>
<script type="text/javascript">

	//push , pop, shift, unshift, splice, reverse, sort想通过改变数组来增添列表内容使视图相应发生变化最好是通过以上七种数组操作方法实现， 假若直接是通过如vm.list[4] = {"id":1111,"name":"jianfneg"}这样来修改并不能引起视图变化。正确操作方法应当是如vm.list.push({"id":25145, "name":"jianfeng"})


	// 如果不想通过遍历方法来改变数组，也可以直接改变整个数组内容，如vm.list = [{....},{.....},{.....}]

	var vm = new Vue({
		el:"#app",
		data:{
			// list:[
			// "dog",
			// "cat",
			// "elephant",
			// "mouse",
			// "duck"

			// ]
			


			list:[
				{
					"id":1101,
					"name":"dog"
				},
				{
					"id":1102,
					"name":"cat"
				},
				{
					"id":1103,
					"name":"duck"
				},
				{
					"id":1104,
					"name":"mouse"
				},
				{
					"id":1105,
					"name":"bird"
				},


			],

			//对象该键值对的值数据可以直接通过如vm.userInfo.name = "feixia"  ,这样改的话视图上也会有相应的改变。
			// 然而是添加数据的话，如vm.userInfo.address = "maoming",则试图不会发生改变，而数据实际上是改变了。可以直接对userInfo重新赋值
			userInfo:{
			name:"feixia",
			age:"20",
			gender:"female",
			salary:"secret"
			}
		}
		

		
		
		

	})



		
</script>
</html>